
<template>
  <el-dialog
    v-if="isRepair === false"
    title="新增工单"
    :visible.sync="createDialogShow"
    :before-close="closeIsShow"
    :close-on-click-modal="false"
  >
    <el-form ref="ruleForm" :model="creatWork" :rules="rules" label-width="130px" class="demo-ruleForm">
      <el-form-item label="设备编号:" prop="innerCode">
        <el-input v-model="creatWork.innerCode" maxlength="15" show-word-limit />
      </el-form-item>
      <el-form-item label="工单类型:" prop="createType">
        <el-select v-model="creatWork.createType" placeholder="请选择">
          <el-option label="补货工单" value="1" />
        </el-select>
      </el-form-item>
      <div class="count"><span>补货数量:</span> <span class="replenishment" @click="isGetRepertoire()">补货清单</span></div>
      <el-form-item label="运营人员:" prop="userId">
        <el-select v-model="creatWork.assignorId" placeholder="请选择">
          <el-option v-for="item in userList" :key="item.userId" :label="item.userName" :value="item.userId" />
        </el-select>
      </el-form-item>
      <el-form-item label="备注:" prop="desc">
        <el-input v-model="creatWork.desc" maxlength="40" show-word-limit :rows="3" type="textarea" placeholder="请输入备注(不超过40个字)" />
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button class="close" @click="closeIsShow">取 消</el-button>
      <el-button class="uncertainty " type="primary" @click="isOkCreate">确 定</el-button>
    </span>
  </el-dialog>
  <el-dialog
    v-else
    title="新增工单"
    :visible.sync="createDialogShow"
    :before-close="closeIsShow"
    :close-on-click-modal="false"
  >
    <el-form ref="ruleForm" :model="creatWork" :rules="rules" label-width="130px" class="demo-ruleForm">
      <el-form-item label="设备编号:" prop="innerCode">
        <el-input v-model="creatWork.innerCode" maxlength="15" show-word-limit />
      </el-form-item>
      <el-form-item label="工单类型:" prop="createType">
        <el-select v-model="creatWork.typeId" placeholder="请选择">
          <el-option v-for="item in EveryTypeList" :key="item.typeId" :label="item.typeName" :value="item.typeId" />
        </el-select>
      </el-form-item>
      <el-form-item label="运营人员:" prop="userId">
        <el-select v-model="creatWork.assignorId" placeholder="请选择">
          <el-option v-for="item in userList" :key="item.userId" :label="item.userName" :value="item.userId" />
        </el-select>
      </el-form-item>
      <el-form-item label="备注:" prop="desc">
        <el-input v-model="creatWork.desc" maxlength="40" show-word-limit :rows="3" type="textarea" placeholder="请输入备注(不超过40个字)" />
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button class="close" @click="closeIsShow">取 消</el-button>
      <el-button class="uncertainty " type="primary" @click="isOkCreate">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { getUserByVending, getVendingByInerCode, createWork, getEveryType } from '@/api'
export default {
  components: {
  },
  props: {
    createDialogShow: {
      type: Boolean,
      requered: true
    },
    workInfo: {
      type: Object,
      default: () => { return {} }
    },
    isRepair: {
      type: Boolean,
      default: false
    },
    alertValue: {
      type: [String, Number],
      default: 50
    }
  },
  data() {
    return {
      creatWork: {
        innerCode: '',
        createType: 1, // 创建类型，传1 或者 2
        userId: 1, // 执行人Id
        productType: 2,
        desc: '',
        details: [],
        assignorId: '',
        typeId: ''
      },
      rules: {
        innerCode: [{ required: true, message: '请输入' }],
        createType: [{ required: true, message: '请选择' }],
        userId: [{ required: true, message: '请选择' }],
        desc: [{ required: true, message: '请输入' }]
      },
      userList: [],
      // 所有工单类型列表
      EveryTypeList: []
    }
  },
  computed: {
  },
  watch: {
    async 'creatWork.innerCode'(val, oldVal) {
      if (val.length === 8) {
        const { data } = await getUserByVending(val)
        this.userList = data
        if (this.workInfo.innerCode) {
          this.creatWork.createType = this.workInfo.createType.toString()
          this.creatWork.assignorId = this.workInfo.assignorId
          this.creatWork.userId = this.workInfo.userId
        }
        this.getRepertoire()
      } else {
        this.userList = []
      }
    }

  },
  created() {
    if (this.workInfo.innerCode) {
      this.creatWork.innerCode = this.workInfo.innerCode
    }
    if (this.isRepair) {
      this.getEveryType()
    }
  },
  methods: {
    closeIsShow() {
      this.$emit('update:createDialogShow', false)
    },
    async isOkCreate() {
      await this.$refs.ruleForm.validate()
      try {
        await createWork(this.creatWork) // 返回true
        this.$message.success('创建成功')
        this.$emit('update:createDialogShow', false)
        this.$emit('updateMyShiTu')
      } catch (error) {
        console.log(error.response.data)
        this.$message.error(error.response.data)
      }
    },
    // 补货清单
    async  getRepertoire() {
      if (this.creatWork.innerCode.length !== 0) {
        const { data } = await getVendingByInerCode(this.creatWork.innerCode)
        data.forEach(item => {
          if (item.skuId) {
            this.creatWork.details.push({
              channelCode: item.channelCode || null,
              expectCapacity: 10,
              skuId: item.skuId || null,
              skuImage: item.sku?.skuImage || null,
              skuName: item.sku?.skuName || null
            })
          }
        })

        this.$emit('getReplenishmentListInfo', data)
      } else {
        await this.$refs.ruleForm.validateField('innerCode')
      }
    },
    isGetRepertoire() {
      this.getRepertoire()
      if (this.isRepair === false) {
        this.$emit('update:replenishmentDialogShowInfo', true)
      }
    },
    // 获取依据阈值所有工单类型列表
    async getEveryType() {
      const { data } = await getEveryType(this.alertValue)
      this.EveryTypeList = data
    }
  }
}
</script>
<style scoped lang='less'>
/deep/.el-dialog{
  position: relative;
  width: 630px;
  border-radius: 10px;
  height: 484px;
  .count{
    width: 396px;
    height: 36px;
    margin: 0 0 0 59px;
    display: flex;
  .replenishment{
    cursor: pointer;
    color: #4368e1;
    margin-left: 20px;
}
  }
  .el-dialog__header {
   border-radius: 10px;
   line-height: 22px;
   font-size: 16px!important;
   font-weight: 600!important;
   height: 52px;
   background-color: #fff!important;
   .el-dialog__title{
     font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Arial,sans-serif;
     color: #333!important;
   }
  }
   .el-dialog__close{
    color: #909399!important;
    &:before{
     color: #909399!important;
    }
   }
   .el-dialog__body{
    width: 100%;
    height: 356px;
   }
   .el-dialog__footer{
    padding: 0 20px 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    .close{
      width: 80px!important;
      height: 36px;
      color: #655b56!important;
      background-color: #fbf4f0!important;
     &:hover{
      color: #655b56!important;
      background-color: #f3e7e1!important;
      }
     }
     .uncertainty{
      width: 80px!important;
      height: 36px;
      background: linear-gradient(135deg,#ff9743,#ff5e20)!important;
      border: none;
      &:hover{
       background: linear-gradient(135deg,#ff7d43,#db3602)!important
      }
     }
   }
   .el-input{
    width:396px
   }
   .el-textarea{
    width:396px
   }
   .el-form-item__label {
    text-align: right;
    vertical-align: middle;
    float: left;
    font-size: 14px!important;
    color: #606266;
    line-height: 40px;
    padding: 0 12px 0 0;
    font-weight: normal;
    box-sizing: border-box;
}

}
</style>
